{% extends "base.html" %}
{% load desc_status_flag %}
{% load get_attr %}
{% load judge_lang_called %}
{% block page_title %}评测机报告 - {% endblock %}
{% block page_head %}
    <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="/static/jsdifflib/diffview.css">
    <style type="text/css">
        .CodeMirror{
            border: 1px solid #ddd;
            border-top: 0;
            height: 400px;
        }
        .diff-cp-contianer{
            height: 400px;
            overflow: auto;
            width: 100%;
        }
        .tr-min-width-100{
            min-width: 100px;;
        }
    </style>
{% endblock %}
{% block page_body %}
<div class="header_container">
    <h1>
        评测机数据详情 <small>
        ({% if user_session.user_role >= 2 %}{{ testdata.name }}{% else %}测试数据{% endif %} of status <strong>{{ status.id }}</strong>)
        </small>
    </h1>
</div>
<div class="page_container">
{% if forbidden %}
    <div class="alert alert-danger">测试数据已被发布者屏蔽</div>
{% else %}
    {% if runData == None %}
        <div class="alert alert-danger">测试数据没有运行，没有返回、或因过期已被清理</div>
    {% elif runData == '' %}
        <div class="alert alert-danger">测试数据超过1MB，为了性能考虑暂时不能使用该功能</div>
    {% else %}
    <div class="row">
        <div class="col-sm-4">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">输入</a></li>
            </ul>
        </div>
        <div class="col-sm-8">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#td-diff-compare" class="btn-td-out-diff-compare" role="tab" data-toggle="tab">标准对比</a></li>
                <li role="presentation"><a href="#td-raw-compare" class="btn-td-out-raw-compare" role="tab" data-toggle="tab">原始数据对比</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4"><textarea id="td-in" class="form-control testdata-in-area" rows="20" readonly>{{ inData }}</textarea></div>
        <div class="col-sm-8">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="td-diff-compare">
                    <div class="diff-cp-contianer"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="td-raw-compare">
                    <div class="row">
                            <div class="col-sm-6"><textarea id="td-out-area" class="form-control" rows="20" readonly>{{ outData }}</textarea></div>
                            <div class="col-sm-6"><textarea id="td-outdata-area" class="form-control" rows="20" readonly>{{ runData }}</textarea></div></div>
                    </div>
                </div>
            </div>
    </div>
    {% endif %}
{% endif %}
</div>
{% endblock %}
{% block page_script %}
    <script src="/static/codemirror/lib/codemirror.js"></script>
    <script src="/static/jsdifflib/difflib.js"></script>
    <script src="/static/jsdifflib/diffview.js"></script>
    <script type="text/javascript">
    $(function () {
        var editorShowed = false;
        $(".testdata-in-area").each(function (key, val) {
            CodeMirror.fromTextArea(val, {
                lineNumbers: true,
                readOnly: true
            });
        });
        $(".btn-td-out-raw-compare").on('shown.bs.tab', function () {
            if (editorShowed){return false;}
            editorShowed = true;
            CodeMirror.fromTextArea(document.getElementById("td-out-area"), {
                lineNumbers: true,
                readOnly: true
            });
            CodeMirror.fromTextArea(document.getElementById("td-outdata-area"), {
                lineNumbers: true,
                readOnly: true
            });
        });
        $(".btn-td-out-diff-compare").each(function (key, val) {
            var base = difflib.stringAsLines($("#td-out-area").val());
            var newtxt = difflib.stringAsLines($("#td-outdata-area").val());
            var sm = new difflib.SequenceMatcher(base, newtxt);
            $("#td-diff-compare > .diff-cp-contianer").append(diffview.buildView({
                baseTextLines: base,
                newTextLines: newtxt,
                opcodes: sm.get_opcodes(),
                // set the display titles for each resource
                baseTextName: "参考答案",
                newTextName: "程序输出",
                contextSize: 2,
                viewType: 0
            }));
        });
    });
    </script>
{% endblock %}